/*
 * @Author: wangqizhang
 * @Date: 2024-04-22 17:06:30
 * @LastEditors: wangqizhang
 * @LastEditTime: 2024-05-07 10:39:45
 * @FilePath: /suixinji-react/src/page/home/components/menu/index.tsx
 * @Description:
 *
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved.
 */
import { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
import './index.scss';
import { Menu, message } from 'antd';
import { useNavigate } from 'react-router-dom';
import {
  getGroupList,
  getNoteLitByGroupId,
  getDefaultGroup,
} from '../../../../api';
import { BookFilled, GroupOutlined } from '@ant-design/icons';
import { useDispatch } from 'react-redux';
import { setNote } from '../../../../store/modules/noteStore';
type menuProps = {
  activeKey: string;
};
const LeftMenu = forwardRef((props: menuProps, ref) => {
  const dispatch = useDispatch();
  const { activeKey } = props;
  useEffect(() => {
    getMenu();
  }, [activeKey]);
  const refreshMenu = () => {
    getMenu();
  };
  const [menuList, setMenuList] = useState<any[]>([]);
  const navigate = useNavigate();
  const getMenu = async () => {
    if (activeKey === '1') {
      const res = await getGroupList();
      if (res.code === '0000') {
        setMenuList(
          res.data.map((item: any) => {
            return {
              label: item.group_name,
              key: item.id,
              children: [],
              icon: (
                <GroupOutlined style={{ color: '#1890ff' }}></GroupOutlined>
              ),
            };
          })
        );
      }
    } else {
      const res = await getDefaultGroup();
      if (res.code === '0000') {
        setMenuList(
          res.data.map((item: any) => {
            return {
              label: item.note_title,
              key: item.id,
              icon: <BookFilled style={{ color: '#1890ff' }}></BookFilled>,
              ...item,
            };
          })
        );
      }
    }
  };
  useImperativeHandle(ref, () => ({
    refreshMenu: refreshMenu,
  }));
  const submenuClick = async (e: any) => {
    if (!e[0]) {
      return;
    }
    const res = await getNoteLitByGroupId(e[0]);
    if (res.code === '0000') {
      if (res.data.length <= 0) {
        return message.warning('此分组下没有笔记');
      }
      const list = menuList.map((item: any) => {
        if (item.key == e[0]) {
          item.children = res.data.map((item: any) => {
            return {
              label: item.note_title,
              key: item.id,
              icon: <BookFilled style={{ color: '#1890ff' }}></BookFilled>,
              ...item,
            };
          });
        }
        return item;
      });
      setMenuList(list);
    } else {
      message.error(res.message);
    }
  };
  const menuClick = ({ key, keyPath }: any) => {
    if (activeKey === '1') {
      const p = menuList.find((item: any) => item.key == keyPath[1]);
      const state = p?.children.find((item: any) => item.key == keyPath[0]);
      dispatch(setNote(state));
      navigate(`/home/note/${key}`, { state: JSON.stringify(state) });
    } else {
      const item = menuList.find((item: any) => item.key == key);
      dispatch(setNote(item));
      navigate(`/home/note/${key}`, { state: JSON.stringify(item) });
    }
  };
  return (
    <Menu
      mode="vertical"
      triggerSubMenuAction="click"
      onOpenChange={submenuClick}
      items={menuList}
      onClick={menuClick}
    ></Menu>
  );
});

export default LeftMenu;
